<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>弹球动画</title>
    <style type="text/css">
        h1 {
            text-align: center;
            font-size: 30px;
            margin-top: 30px;
            margin-bottom: 30px;
            color: #999;
            text-shadow: 0px 1px 3px #000;
        }

        .box {
            width: 400px;
            height: 300px;
            margin: 30px auto;
            border: 1px solid #ccc;
            position: relative;
        }

        .box .circle {
            position: absolute;
            left: 50%;
            top: 0px;
            margin-left: -70px;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            background: -webkit-linear-gradient(top, #fff, #999);
            background: -moz-linear-gradient(top, #fff, #999);
            background: -ms-linear-gradient(top, #fff, #999);
            background: linear-gradient(to top, #fff, #999);
            box-shadow: inset 0 0 30px #999, inset 0 -15px 70px #999;
            animation: mycircle 0.8s infinite cubic-bezier(0.01, 0.01, 1, 1.18);
        }

        .circle:after {
            position: absolute;
            top: 10px;
            left: 50%;
            margin-left: -35px;
            content: "";
            width: 70px;
            height: 30px;
            border-radius: 50%;
            background: -webkit-linear-gradient(top, #fff, #999);
            background: -moz-linear-gradient(top, #fff, #999);
            background: -ms-linear-gradient(top, #fff, #999);
            background: linear-gradient(to top, #fff, #999);
        }

        .shade {
            position: absolute;
            left: 50%;
            bottom: 0px;
            margin-left: -60px;
            border-radius: 50%;
            width: 90px;
            height: 60px;
            box-shadow: inset 10px 10px 10px rgba(20, 20, 20, 0.1);
            transform: scaleY(.3);
            animation: myshade 0.8s infinite ease;
        }


        @keyframes mycircle {
            50% {
                top: 157px;
                transform: scaleY(0.9);
            }
        }

        @keyframes myshade {
            50% {
                bottom: -2px;
                left: 58%;
                width: 63px;
                height: 12px;
                box-shadow: inset 0px 0px 100px 10px #838080;
            }
        }
    </style>
</head>

<body>
    <h1>弹球动画</h1>
    <div class="box">
        <div class="circle"></div>
        <div class="shade"></div>
    </div>
</body>

</html>